import React, { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { NavBar, CapsuleTabs, Popup, Collapse, Tag, List, Input, Button } from 'antd-mobile'
import { Steps } from 'antd-mobile'
import styles from './css/deail.module.css'
import dayjs from 'dayjs'

const { Step } = Steps

const Deail = () => {
    const nav = useNavigate()
    const { state } = useLocation()
    const [visible5, setVisible5] = useState(false)
    const [value, setValue] = useState('')
    const [messList, setMessList] = useState([])

    const date = dayjs().format("YYYY-MM-DD")

    const sitList = ["二等座", "一等座", "商务座"]
    const spiList = [
        state.tick.secondTick,
        state.tick.firstTick,
        state.tick.vip
    ]

    const getpl = () => {
        if (value === "") return;
        setMessList([...messList, value])
        setValue("")
    }

    const getDeail=()=>{
       nav("/order",{state})
    }
    return (
        <div>
            <NavBar onBack={() => nav("/")}>{state.start}—{state.end}</NavBar>
            {/*渲染详情数据*/}
            <div>
                <dl className={styles.dl}>
                    <dt>
                        <div>{state.start}—{state.end}</div>
                        <div>{date}</div>
                    </dt>
                    <dd>
                        <div>{state.startTime}</div>
                        <div onClick={() => setVisible5(true)}>时刻表</div>
                    </dd>
                    <dd>
                        <div>二等座:{state.tick.secondTick}</div>
                        <div>一等座:{state.tick.firstTick}</div>
                        <div>商务座:{state.tick.vip}</div>
                    </dd>
                </dl>
            </div>
            <div>
                <CapsuleTabs>
                    <CapsuleTabs.Tab title='二等座' key='fruits'>
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='一等座' key='vegetables'>
                    </CapsuleTabs.Tab>
                    <CapsuleTabs.Tab title='商务座' key='animals'>
                    </CapsuleTabs.Tab>
                </CapsuleTabs>
            </div>


            <div>
                <Collapse accordion
                    arrowIcon={(active) =>
                        active ? (
                            <Tag color="warning">收起</Tag>
                        ) : (
                            <Tag color="warning">预</Tag>
                        )
                    }
                >
                    {
                        sitList.map((v, i) => {
                            return <Collapse.Panel key={i} title={`${v} ￥${spiList[i]}`}>
                                <List>
                                    <List.Item
                                        arrowIcon={
                                            <Tag color="warning" onClick={()=>getDeail()}>买票</Tag>
                                        }
                                    >
                                        快速预定
                                    </List.Item>
                                    <List.Item
                                        arrowIcon={
                                            <Tag color="warning" onClick={()=>getDeail()}>买票</Tag>
                                        }
                                    >
                                        普通预定
                                    </List.Item>
                                </List>
                            </Collapse.Panel>
                        })
                    }

                </Collapse>
            </div>


            {/* 评论 */}
            <div>
                <Input
                    placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                <Button block
                    color='success'
                    size='large'
                    shape='rounded'
                    onClick={() => getpl()}>
                    评论
                </Button>

                <div>
                    {
                        messList.map((v, i) => {
                            return <p key={i}>{v}</p>
                        })
                    }
                </div>
            </div>


            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                }}
            >
                <div className={styles.div1}
                    onClick={() => setVisible5(false)}>X</div>
                <div>
                    <Steps direction='vertical'>
                        <Step
                            title='北京'
                            status='finish'
                            description='完成时间：2020-12-01 12:30'
                        />
                        <Step
                            title='南海'
                            status='finish'
                            description='完成时间：2020-12-01 12:30'
                        />
                        <Step
                            title='厦门'
                            status='finish'
                            description='完成时间：2020-12-01 12:30'
                        />
                        <Step
                            title='三亚'
                            status='finish'
                            description='完成时间：2020-12-01 12:30'
                        />
                    </Steps>
                </div>

            </Popup>
        </div>
    )
}

export default Deail
